<template>
  <div class="msg_detail_tiem_box">
    <el-container direction='horizontal'  v-if="detail_item.isMine == 1">
        
        <el-container direction='vertical' >
            <div ><span style="float:right">{{this.currentUser.user.nickName}}</span></div>
            <div >
                <!-- <div class='chat_right_triangle'></div> -->
                <span class="chat_right_span">{{detail_item.content}}</span>
            </div>
        </el-container>
        <div><el-avatar :src='this.currentUser.user.portrait' fit='cover' > me </el-avatar></div>
    </el-container>
        <!-- 分割线：上：当前用户(需要右对齐)；下：对话的其他用户 -->
    <el-container direction='horizontal'  v-if="detail_item.isMine == 0">
        <div><el-avatar :src='you_data.portrait' fit='cover' > you </el-avatar></div>
        <el-container direction='vertical' >
            <div>{{you_data.nickName}}</div>
            <div>
                <!-- <div class='chat_left_triangle'></div> -->
                <span class='chat_left_span'>{{detail_item.content}}</span>
            </div>
        </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  components: {
    
  },
  activated() {
    
  },
  props:{
      detail_item: Object,
      you_data: Object,
  },
  data() {
    return {
      
    }
  },
  methods: {
    
  },
}
</script>

<style>
  .msg_detail_tiem_box{
    margin-top: 15px;

  }
  /* 参考网址：https://www.cnblogs.com/felixnet/p/8019446.html */
  /* === 废弃 小三角 === */
  .chat_left_triangle{
    height: 0px;
    width: 0px;
    border-width: 6px;
    border-style: solid;
    border-color: transparent rgb(182, 182, 182) transparent transparent;
    position: relative;
    /* left: -22px; */
    left:0px;
    top: 8px;
  }

  .chat_left_span{
    background-color: #ffffff;
    /*float: left;*/
    margin: 0px 50px 10px 5px;
    padding: 10px 10px 10px 10px;
    border-radius: 0 16px 16px 16px; /* 这个用于设置 矩阵的圆角 */ 
    /* text-indent: -12px; */
    text-indent: 0px; /* 设置span内部文本的缩进 */
    
    /* word-break: normal; 
    display: block; 
    word-wrap: break-word ; */
    display: inline-block;
  }

  /* === 废弃 小三角 === */
  .chat_right_triangle{
    float: right;
    height: 0px;
    width: 0px;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent transparent #b2e281;
    position: relative;
    /* right:-22px; */
    left: 0px;
    top:8px;
  }

  .chat_right_span{
    /* float:right; */
    float: right;
    background-color: #80b9f2;
    margin: 0px 5px 10px 50px;
    padding: 10px 10px 10px 10px;
    border-radius:16px 0 16px 16px;;

    /* word-break: normal;  */
    /* display: block;  */
    display: inline-block;
    /* word-wrap: break-word ; */
  }
</style>